/**
 * 顶部tab切换控件
 * Created by dongchen on 16/5/12.
 */
define(['ViewBase', 'jquery', 'lodash'], function (ViewBase, $, _) {

    var tabView = ViewBase.extend({

        events: {
            'click -> .top-tab-ctn li': 'onTabChange'
        },

        /**
         *
         * @param opts = {el, callback}
         */
        init: function (opts) {
            tabView.__super__.init(opts);
            this.loadCss("/js/module/topTab/topTab.css");
            this.tpl = this.getTpl("/js/module/topTab/topTab.tpl", "top-tab-tpl");
            this.callback = opts.callback;
        },

        onTabChange: function (event) {

            var elem = $(event.currentTarget);
            $('.top-tab-ctn li').removeClass('active');
            elem.addClass('active');
            if(this.callback){
                this.callback(event.target.textContent);
            }
        },

        /**
         * 渲染reportTab组件
         * @param options = {
         *     tab : ['tabNameA','tabNameB','tabNameC']
         * }
         */
        render: function (options) {
            if(!options || !options.tab || options.tab.length == 0){
                this.el.empty();
            }else{
                this.el.html(_.template(this.tpl, {'variable': 'tab'})(options.tab));
                this.el.find('.top-tab-ctn ul li:first-child').click();
            }
        }
    });
    return tabView;
});
